<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <style>

        div.search {
            padding: 10px 0;
        }

        form {
            position: relative;
            width: 500px;
            margin: 0 auto;
        }

        input, button {
            border: none;
            outline: none;
        }

        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }

        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }

        /*搜索框6*/

        .bar6 input {
            border: 2px solid #c5464a;
            border-radius: 5px;
            background: transparent;
            top: 0;
            right: 0;
        }

        .bar6 button {
            background: #c5464a;
            border-radius: 0 5px 5px 0;
            width: 60px;
            top: 0;
            right: 0;
        }

        .bar6 button:before {
            content: "搜索";
            font-size: 13px;
            color: #F9F0DA;
        }


    </style>

</head>
<body>
<div class="row" style="margin-top: 30px">
    <div class="col-sm-12" style="text-align: center">
        <h2>未来七天天气搜索查询</h2>
    </div>
</div>

<div class="row" style="margin-top: 50px">
    <div class="col-sm-12">
        <div id="container">
            <div class="search bar6">
                <form>
                    <input type="text" placeholder="请输入城市" name="keyword" value="{{ keyword }}">
                    <button type="submit"></button>
                </form>
            </div>
        </div>

    </div>
</div>
<div class="row" style="margin-top: 50px">
    <div class="col-sm-1"></div>
    <div class="col-sm-10" style="text-align: center">
        {% if keyword %}
            {% if data.errcode %}
                <h3>城市不存在</h3>

            {% else %}

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th style="text-align: center">日期</th>
                        <th style="text-align: center">天气</th>
                        <th style="text-align: center">白天天气</th>
                        <th style="text-align: center">夜晚天气</th>
                        <th style="text-align: center">最高气温</th>
                        <th style="text-align: center">最低气温</th>
                        <th style="text-align: center">风速</th>
                        <th style="text-align: center">空气质量指数</th>
                        <th style="text-align: center">空气质量等级</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for foo in data.data %}
                        <tr>
                            <td>{{ foo.date }}</td>
                            <td>{{ foo.wea }}</td>
                            <td>{{ foo.wea_day }}</td>
                            <td>{{ foo.wea_night }}</td>
                            <td>{{ foo.tem1 }}</td>
                            <td>{{ foo.tem2 }}</td>
                            <td>{{ foo.win_speed }}</td>
                            <td>{{ foo.air }}</td>
                            <td>{{ foo.air_level }}</td>
                        </tr>

                    {% endfor %}

                    </tbody>
                </table>

                <div id="main" style="width: 800px;height:400px;margin: 0 auto;margin-top: 30px"></div>

            {% endif %}

        {% endif %}


    </div>
</div>

<script type="text/javascript">
    var dateList=[];
    {% for foo in data.trend.date %}

        dateList.push('{{ foo }}');
    {% endfor %}

        var temp1List=[];
    {% for foo in data.trend.temp1 %}

        temp1List.push('{{ foo }}');
    {% endfor %}

        var temp2List=[];
    {% for foo in data.trend.temp2 %}

        temp2List.push('{{ foo }}');
    {% endfor %}


    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '{{ keyword }}未来七日气温走势'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最低气温', '最高气温']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:dateList
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '最低气温',
                type: 'line',
                stack: '温度',
                data: temp2List
            },
            {
                name: '最高气温',
                type: 'line',
                stack: '温度',
                data: temp1List
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


</body>
</html>